<template>
    <div class="box-card">
        <div style="display:flex;justify-content: space-between">
            <div>
                <el-input v-model="queryData.clientName" placeholder="客户名称" size="small"></el-input>
                <el-date-picker
                        size="small"
                        v-model="queryData.createTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="创建日期"
                        end-placeholder="创建日期">
                </el-date-picker>

                <el-select v-model="queryData.customerLeadsSex" placeholder="客户性别" size="small">
                    <el-option v-for="item in dictionary.customerLeadsSex" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                &nbsp;&nbsp;
                <el-button type="primary" size="small" @click="queryDataHandle">查询</el-button>
<!--                <el-divider direction="vertical"></el-divider>-->
                <el-button plain size="small" @click="resetQuery">重置</el-button>
            </div>
            <div>
                <el-button type="primary" size="small" @click="exportClientHandle">导出</el-button>
            </div>
        </div>

        <div class="interspaceH"></div>

        <el-table @selection-change="tableRowChange" :data="dataSource" @row-click="openDetail"
                  :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="customerLeadsName" label="名称" :formatter="formatter"></el-table-column>
            <el-table-column prop="customerLeadsSex" label="客户性别" :formatter="formatter"></el-table-column>
            <el-table-column prop="customerLeadsPhone" label="电话" :formatter="formatter"></el-table-column>
            <el-table-column prop="customerLeadsRemarks" label="描述" :formatter="formatter"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="formatter"></el-table-column>
        </el-table>

        <div class="interspaceH"></div>

        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                       :current-page="pagePagination.currentPage"
                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                       layout="total, sizes, prev, pager, next"
                       :total="pagePagination.total">
        </el-pagination>

        <ClientDetail ref="clientDetail"/>
    </div>
</template>

<script>
import ClientDetail from '@/views/customer/client/client_detail'

const initQueryData = {
    clientName: '',//客户名称
    customerLeadsSex: '',//客户性别
    createTime: ''//创建时间
}

const customerLeadsSex = [
    {
        value: '1',
        label: '男'
    },
    {
        value: '0',
        label: '女'
    }
]

export default {
    name: "client_convert",
    components:{
        ClientDetail
    },
    data() {
        return {
            multipleSelection: [],
            //查询表单
            queryData: {...initQueryData},
            //下拉列表种类
            dictionary: {
                customerLeadsSex: customerLeadsSex
            },
            //字段转换
            fieldType: {
                createTime: "datetime",
                customerLeadsSex: "array"
            },
            //列表数据
            dataSource: [],
            //分页后列表数据
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        let that = this
        //初始化执行查询方法
        this.queryDataHandle(1, 10)
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let that = this;
            let queryData = {...that.queryData}
            let _startCreateTime = queryData['createTime'][0];
            let _endCreateTime = queryData['createTime'][1];
            queryData['_startCreateTime'] = _startCreateTime
            queryData['_endCreateTime'] = _endCreateTime
            delete queryData['createTime']
            let payload = {
                ...queryData,
                customerLeadsStatus: '4',
                pageNum: page,
                pageSize: row
            }
            this.$request("/api/clientClue/getClueByParams/1_0", payload, "POST").then((data) => {
                that.dataSource = data.rows
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
            })
        },
        resetQuery() {
            this.queryData = {...initQueryData}
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        exportClientHandle() {
            this.$requestFile("/api/clientClue/exportClientClue/1_0", {customerLeadsStatus: '4'}, "已转客户.xlsx")
        },
        openDetail() {
            this.$refs.clientDetail.open(true)
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.el-card__body .el-select {
    width: 200px;
}
</style>
